<template>
  <a-modal
    width="640px"
    :visible="visible"
    title="立即更换"
    :confirm-loading='confirmLoading'
    @ok='handleOk'
    @cancel='handleCancel'
  >
    <a-alert message="选择司机字段为空、选择挂车字段为空则默认为与当前牵引车解除绑定！" banner /><br/>
    <a-form-model ref="roleForm" :model="form" :rules="rules" :labelCol="{span: 6}" :wrapperCol="{span: 16}">
      <a-form-model-item prop="type" label="选择更换对象">
        <a-checkbox-group v-model="form.type">
          <a-checkbox :value="1">更换司机</a-checkbox>
          <a-checkbox v-if="isSelfOperation===1" :value="2">更换挂车</a-checkbox>
        </a-checkbox-group>
      </a-form-model-item>

      <a-form-model-item label="更换司机">
        <a-select show-search :disabled="!checked1" :filter-option="filterOption" option-filter-prop="children" v-model="driverId">
          <a-select-option key>请选择</a-select-option>
          <a-select-option v-for="(m) in options1" :key="m.driverId">{{m.word}}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item v-if="isSelfOperation===1" label="更换挂车">
        <a-select show-search :disabled="!checked2" @change="handleChange2" :filter-option="filterOption" option-filter-prop="children" v-model="trailerId">
          <a-select-option key>请选择</a-select-option>
          <a-select-option v-for="(m) in options2" :key="m.trailerId">{{m.word}}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-col :span="16" :offset="6"><p>总整备质量（牵引车整备质量+挂车整备质量）：{{kerbMass}}kg</p></a-col>
      <a-form-model-item label="更换备注">
        <a-textarea :rows="4" v-model="remark" :disabled="checkedMark"/>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { queryDriverAndTractorDown, queryTrailerAndTractorDown, addTruckChange } from '@/api/landCenter'

const fomrMessage = `必填项不能为空`
const defaultForm = (driverId = '', trailerId = '') => {
  return {
    type: [],
    driverId, // 司机id
    trailerId // 挂车id
  }
}
export default {
  name: 'tractor-change-modal',
  props: {
    truckId: null,
    isSelfOperation: null,
    visible: false
  },
  data () {
    return {
      confirmLoading: false,
      form: defaultForm(),
      rules: {
        type: [{required: true, message: fomrMessage, trigger: 'change'}]
      },
      options1: [],
      options2: [],
      defaultValue1: '',
      defaultValue2: '',
      kerbMass: '0',
      // save
      driverId: '', // 司机id
      trailerId: '', // 挂车id
      remark: '' // 司机id
    }
  },
  computed: {
    checked1 () {
      return this.form.type.includes(1)
    },
    checked2 () {
      return this.form.type.includes(2)
    },
    checkedMark () {
      return this.form.type.length === 0
    }
  },
  methods: {
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    handleChange2 (value) {
      if (`value`) {
        this.kerbMass = this.options2.filter(v => v.trailerId === value)[0].kerbMass
      } else {
        this.kerbMass = '0'
      }
    },
    handleOk () {
      this.$refs.roleForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          const data = {
            remark: this.remark,
            tractorId: this.truckId
          }
          data['driverId'] = this.checked1 ? this.driverId : this.form.driverId
          data['trailerId'] = this.checked2 ? this.trailerId : this.form.trailerId
          addTruckChange(data).then(rsp => {
            this.confirmLoading = false
            this.$message.success('更换成功')
            this.$emit('set-visible', false)
            this.$emit('handleSubmit')
          }).catch(() => { this.confirmLoading = false })
        }
      })
    },
    handleCancel () {
      this.$emit('set-visible', false)
      this.$refs['roleForm'].resetFields()
    }
  },
  watch: {
    visible () {
      if (this.visible) {
        this.form = defaultForm()
        this.remark = ''
        this.driverId = ''
        this.trailerId = ''
        queryDriverAndTractorDown({type: this.isSelfOperation}).then(rsp => {
          this.options1 = rsp.data
          const target = rsp.data.filter(item => parseInt(this.truckId) === item.tractorId)[0]
          if (target) {
            this.driverId = target.driverId
            this.form.driverId = target.driverId
          }
        })

        queryTrailerAndTractorDown({}).then(rsp => {
          this.options2 = rsp.data
          const target = rsp.data.filter(item => parseInt(this.truckId) === item.tractorId)[0]
          if (target) {
            this.trailerId = target.trailerId
            this.form.trailerId = target.trailerId
            this.kerbMass = target.kerbMass
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
